@import url(./base.less);
@import url(./common.less);


// 轮播图
.swiper {
    width: 100%;
    height: 500px;
    background-color: #f5f5f5;
    margin-top: 22px;

    .banner {
        position: relative;
        background-image: url(../uploads/banner1.png);
        background-repeat: no-repeat;

        ul {

            li {
                display: flex;
                width: 250px;
                height: 50px;
                align-items: center;
                background-color: rgba(0, 0, 0, .58);
                // opacity: .42;
                color: #fff;

                &:hover {
                    background-color: var(--lv);
                }

                a {
                    color: #fff;
                }


                dl {
                    display: flex;
                    flex: 1;
                    align-items: center;
                    text-align: center;
                    color: #fff;


                    dt {
                        font-size: 16px;
                        height: 50px;
                        line-height: 50px;
                        margin-right: 14px;
                        margin-left: 29px;
                    }

                    dd {
                        font-size: 14px;
                        height: 50px;
                        line-height: 50px;
                        margin-right: 5px;
                    }
                }

                .icon-arrow-right-bold {
                    width: 20px;
                    height: 20px;
                    margin-right: 10px;
                    text-align: center;
                    color: #fff;
                    cursor: pointer;
                }
            }
        }

        .float-point {
            position: absolute;
            right: 10px;
            bottom: 20px;

            ul {
                display: flex;
                text-align: center;
                margin-right: 10px;
                height: 20px;
                align-items: center;

                li {
                    width: 5px;
                    height: 5px;
                    margin-right: 10px;
                    border-radius: 50%;
                    background-color: rgba(255, 255, 255, .3);
                    border: 6px solid rgba(255, 255, 255, 0)
                }

                .active {
                    background-color: rgba(255, 255, 255, 1);
                    border: 6px solid rgba(255, 255, 255, 0.3);
                    border-radius: 50%;
                }
            }
        }
    }




}



.banner {

    .title {

        display: flex;
        justify-content: space-between;

        .left {
            display: flex;
            flex: 1;

            align-items: end;

            h2 {
                height: 42px;
                line-height: 42px;
                font-size: 30px;
                font-family: PingFangSC-Regular;
                color: #333;
                margin-right: 35px;
            }

            p {
                font-family: PingFangSC-Regular;
                font-size: 16px;
                color: #A1A1A1;
            }
        }


        .right a {
            display: flex;
            justify-content: space-between;
            vertical-align: bottom;

            p {
                margin-right: 10px;
            }

        }
    }

    .content {

        ul {
            display: flex;
            justify-content: space-between;

            li {
                display: block;
                width: 304px;
                height: 404px;
                background-color: #EEF9F4;

                .image {
                    width: 304px;
                    height: 304px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .desc {
                    height: 28px;
                    margin-top: 18px;
                    margin-bottom: 8px;
                    line-height: 28px;
                    font-size: 20px;
                    font-family: PingFangSC-Regular;
                    color: #333;
                    text-align: center;
                }

                .price {
                    height: 31px;
                    line-height: 31px;
                    font-family: PingFangSC-Regular;
                    font-size: 22px;
                    color: #AA2113;
                    letter-spacing: 1.1px;
                    line-height: 31px;
                    font-weight: 400;
                    text-align: center;
                }
            }
        }
    }
}


// 人气推荐
.popular {

    margin-bottom: 60px;

    .content {

        ul {
            li {
                background-color: #fff;

                .title {
                    display: list-item;
                    height: 28px;
                    line-height: 28px;
                    text-align: center;
                    font-family: PingFangSC-Regular;
                    font-size: 20px;
                    color: #333333;
                    margin-top: 17px;

                }

                .desc {
                    margin-top: 15px;
                    margin-bottom: 0;
                    font-size: 16px;
                    color: #A1A1A1;
                }
            }
        }
    }
}

// 热门品牌
.hot {
    background-color: #F5F5F5;
    margin-bottom: 40px;


    .banner {
        .title {

            .right {
                position: relative;

                i {
                    position: absolute;
                    bottom: -30px;
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    line-height: 20px;
                    background-color: #ccc;
                    color: #fff;
                    vertical-align: baseline;
                    text-align: center;

                    &:first-child {
                        right: 35px;
                    }

                    &:last-child {
                        right: 5px;
                    }
                }

                .active {
                    background-color: var(--lv);
                }
            }
        }

        .content {

            ul {

                li {
                    background-color: #F5F5F5;
                    ;

                    .image {
                        width: 244px;
                        height: 306px;
                        margin-bottom: 40px;
                    }

                    height: 100%;
                }
            }
        }
    }
}

// 生鲜 & 服饰
.fresh-food,
.dress,
.home,
.kitchen {
    .title {
        .tag {

            width: 500px;

            ul {
                display: flex;

                li {
                    width: none;
                    height: 30px;

                    a {
                        display: inline-block;
                        height: 30px;
                        line-height: 30px;
                        text-align: center;
                        font-family: PingFangSC-Regular;
                        font-weight: 400;
                        font-size: 16px;
                        color: #333333;
                        padding: 0px 3px;
                    }
                }

                .active {
                    border-bottom: 0px;

                    a {
                        color: #fff;
                        background-color: var(--lv);
                    }
                }


            }
        }
    }


    .content {

        display: flex;
        justify-content: space-between;


        .left {
            display: block;
            width: 248px;
            height: 610px;
            cursor: pointer;
            background-image: url(../uploads/fresh_left.png);
            background-repeat: no-repeat;
        }

        .right {
            width: 968px;
            height: 610px;


            ul {
                display: flex;
                flex-wrap: wrap;

                li {
                    position: relative;
                    width: 242px;
                    height: 305px;
                    padding: 10px 21px;
                    background-color: #fff;
                    border: 2px solid #fff;
                    overflow: hidden;
                    cursor: pointer;

                    img {
                        width: 190px;
                        height: 171px;
                    }

                    .desc {
                        text-align: left;
                        height: 16px;
                        line-height: 16px;
                        margin-top: 10px;
                        margin-bottom: 0;
                        font-family: PingFangSC-Regular;
                        font-size: 16px;
                        color: #333333;
                    }

                    .size {
                        text-align: left;
                        margin-top: 0;
                        font-family: PingFangSC-Regular;
                        font-size: 16px;
                        color: #333333;
                    }

                    .handle {
                        text-align: left;
                        margin-top: 0;
                        font-family: PingFangSC-Regular;
                        font-size: 16px;
                        color: #333333;
                        font-weight: 500;
                    }

                    .price {
                        text-align: left;
                        margin-top: 7px;
                    }

                    .like {
                        position: absolute;
                        width: 242px;
                        height: 84px;
                        left: 0px;
                        bottom: -84px;
                        text-align: center;
                        background-color: var(--lv);
                        transition: .3s;
                        cursor: pointer;

                        h4 {
                            font-family: PingFangSC-Regular;
                            font-size: 18px;
                            color: #FFFFFF;
                            text-align: center;
                            margin-top: 16px;
                        }

                        p {
                            display: inline-block;
                            width: 114px;
                            text-align: center;
                            font-family: PingFangSC-Regular;
                            font-size: 13px;
                            color: #FFFFFF;
                            vertical-align: middle;
                            border-top: 1px solid #fff;

                            .icon-arrow-right-bold {
                                font-size: 13px;
                            }
                        }
                    }
                }

                .active {
                    border: 2px solid var(--lv);

                    .like {
                        bottom: -0px;
                    }
                }
            }
        }

    }
}


// 服饰
.dress {
    .content {
        .left {
            background-image: url(../uploads/colthes_left.png)
        }
    }
}

// 餐厨
.kitchen {
    .content {
        .left {
            background-image: url(../uploads/kitchen_left.png)
        }
    }
}

// 居家
.home {
    .content {
        .left {
            background-image: url(../uploads/home_left.png)
        }
    }
}

// 最新专题

.new {

    margin-bottom: 40px;
    .content {
        ul {
            li {
                position: relative;
                width: 405px;
                height: 355px;
                background-color: pink;

                .image {
                    width: 100%;
                    height: 288px;

                    img {
                        width: 100%;
                    }
                }

                .title {
                    position: absolute;
                    width: 405px;
                    height: 90px;
                    display: block;
                    left: 0;
                    bottom: 67px;
                    color: #fff;
                    overflow: hidden;
                    padding: 0 15px;
                    background-image: linear-gradient(
                        180deg,
                        rgba(137,137,137,0.00),
                        rgba(0,0,0,0.90)
                    );

                    .top {
                        display: block;
                        font-family: PingFangSC-Regular;
                        margin-top: 20px;
                        font-size: 20px;
                        color: #FFFFFF;
                    }

                    .end {
                        display: block;
                        font-family: PingFangSC-Regular;
                        font-size: 16px;
                        color: #FFFFFF;
                    }
                }

                .price {
                    width: 79px;
                    height: 25px;
                    position: absolute;
                    right: 15px;
                    bottom: 97px;
                    background-color: #fff;
                    font-family: PingFangSC-Regular;
                    font-size: 18px;
                    color: #AA2113;
                    letter-spacing: 0;
                    text-align: center;
                    line-height: 25px;
                    font-weight: 400;
                }

                .bottom {
                    display: flex;
                    justify-content: space-between;
                    padding: 25px 15px;
                    background-color: #fff;
                    overflow: hidden;

                    .icon-browse {
                        margin-left: 20px;
                    }
                }
            }
        }
    }
}